$(function () {
    // 发送请求获取真正的数据 并通过JS渲染到页面上
    function sendAjax(num) {
        $.ajax({
            url: "/php/requestGoodsList.php",
            data: {
                page: num
            },
            type: "get",
            dataType: "json",
            success(data) {
                var str = "";
                data.forEach(value => {
                    str += 
                        `<li class="list-group-item col-lg-3 goodItem" >
                            <div class="panel panel-default">
                                <div class="panel-heading">${value.cat_id}</div>
                                <div class="panel-body">
                                <img class="img-responsive" src="${value.goods_big_logo}" alt="">
                                </div>
                                <div class="desc"><a href="./detail.html#${value.goods_id}">${value.goods_name}</a></div>
                                <footer class="h4  text-danger">￥${value.goods_price}</footer>
                            </div>
                        </li>`
                })

                $("#goodsList").html(str);



            }
        })
    }

    // 页面加载请求一次
    sendAjax(0);

    // 获取总数据
    $(".myPagination").Pagination({
        page: 1,
        count: 709,
        limit: 20,
        groups: 8,
        onPageChange: function (page) {
            console.log("当前是:" + page);
            sendAjax(page - 1);
        }
    });

})